<template>
	<view class="missrivertop1">
		<view style="display: flex;justify-content: space-between;padding: 110rpx 69rpx 20rpx 20rpx;height: 69rpx;">
			<view class="" style="z-index: 100000;">
			<uni-icons custom-prefix="back" type="back" size="30" color="#FFFFFF" @click="Black"></uni-icons>
			</view>
			<view class="top_right" @click="getmissList">
				我的思念灯
			</view>
			<view class=""></view>
		</view>
		<lff-barrage ref="lffBarrage" :newlistData='listData'></lff-barrage>
		<view class="centerview">
			<image class="centerimg" :src="centerimg" mode=""></image>
			<view class="centersum" :style="{display:snbtn == false ? '' : 'none'}">已有{{misssum}}人放河灯</view>
		</view>
		<view class="barrage">
			<view class="footer">
				<view class="btn" @click="misssubmit">
					{{snbtn == false ? '去放思念灯' : '再放一个'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {imgBaseUrl} from '../../../../utils/baseUrl.js'
	import {busTreviRivernumber,busTreviRivershow} from '../../../../utils/api.js'
	import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
	export default {
		components: {
			lffBarrage
		},
		data() {
			return {
				centerimg: imgBaseUrl + "/img/missimg/centerimg.png",
				misssum: 0,
				snbtn:'',
				listData:[],
				timeclear:''
			};
		},
	 async	mounted(){
		 //思念河放灯人数
			const result = await busTreviRivernumber()
			this.misssum = result.result
			this.snbtn = this.$parent.isbtn
			this.Data()
			setTimeout(()=>{
				this.colrdo()
			},1000)
		},
		methods: {
			//弹幕接口
			async Data(){
				const data = await busTreviRivershow()
				this.listData = data.result
			},
			colrdo() { //插入一条弹幕
				this.$refs.lffBarrage.newadd()
			},
			getmissList() {
				this.$emit('reput')
			},
			misssubmit() {
				// console.log(this.snbtn,'this');
					this.$emit('misssubmit')
			},
			Black(){
				 this.listData = []
				uni.reLaunch({
					url:"/pages/tabbar/home/home"
				})
			},
			// 图片渲染
			getImgUrl(image){
				return imgBaseUrl+image;
			},
		},
		onUnload() {
		    this.listData = []
			this.Data()
			this.colrdo()
		  }
	}
</script>

<style lang="less" scoped>
	.missrivertop1 {
		.top_right {
			// padding: 40rpx 30rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 200;
			text-align: right;
			z-index: 100000;
		}

		.centerview {
			text-align: center;
			height: 70vh;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			
			align-items: center;
		}

		.centerimg {
			width: 240rpx;
			height: 80rpx;
			margin-top: 255rpx;;
			// margin: auto;
		}

		.centersum {
			margin-top: 24rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			-webkit-background-clip: text;
			-webkit-text-fill-color: #ffffff7d;
		}

		.barrage {
			width: 100%;
			height: 200rpx;
			// border: 1px solid red;
			position: relative;
		}
		.img1{
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: -26rpx;
			left:420rpx;
		}
		.footer {
			// position: absolute;
			// top: 100%;
			// left: 30%;
			// z-index: 10000;
			display: flex;
			justify-content: center;
			    margin-top: 5rpx;
			.btn {
				text-align: center;
				width: 356rpx;
				height: 100rpx;
				color: #60371A;
				font-family: PingFang SC-Bold, PingFang SC;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 100rpx;
				background: linear-gradient(180deg, #FEF1DF 0%, #FBE5C4 100%);
				border-radius: 52rpx 52rpx 52rpx 52rpx;
				opacity: 1;
			}
		}
	}
</style>
